<template>
  <div id="resetPassword">
    <div class="center">
      <h1 style="font-size: 18px; padding-top: 30px">
        <i class="el-icon-info"></i>重置密码/请根据提示输入相关的信息
      </h1>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="margin-top: 30px"
      >
        <el-form-item label="手机号">
          <el-input v-model="form.in_mobile"></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: space-between">
          <el-form-item label="验证码">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-button
            style="height: 40px"
            @click="identclick"
            :disabled="identification"
            >{{ identification ? `重新发送${time}` : "获取验证码" }}</el-button
          >
        </div>
        <el-form-item label="新密码">
          <el-input v-model="form.in_userpassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="userpassword" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">重置密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { phone_send, resetpassword } from "@/api";
export default {
  data() {
    return {
      userpassword: "",
      form: {
        in_mobile: "",
        in_userpassword: "",
        code: "",
      },
      identification: false,
      time: 60,
    };
  },
  methods: {
    onSubmit() {
      if (
        !this.form.in_mobile ||
        !this.form.in_userpassword ||
        !this.form.code ||
        !this.userpassword ||
        this.userpassword !== this.form.in_userpassword
      )
        return this.$message.warning("请填写信息或检查密码是否输入错误");
      resetpassword(this.form).then((res) => {
        if (res.status === 0) {
          this.$message.success("修改成功");
          setTimeout(() => {
            this.$router.push("/login");
          }, 1500);
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    identclick() {
      if (!this.form.in_mobile) return this.$message.warning("请填写手机号");
      this.identification = true;
      phone_send({ in_mobile: this.form.in_mobile }).then((res) => {
        let Time = setInterval(() => {
          if (this.time == 0) {
            this.identification = false;
            clearInterval(Time);
            this.time = 60;
          }
          this.time--;
        }, 1000);
        this.$message.success(res.message);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#resetPassword {
  background-color: #fafbff;
}
.center {
  width: 400px;
  margin: 0 auto;
}
</style>
